<template>
	<view>
		<uv-navbar title="详情统计" auto-back placeholder>
			<template #right>
				<uv-icon :name="iconFunnel" label="筛选" label-color="#4EA770" label-size="28rpx" @click="rightClick" />
			</template>
		</uv-navbar>
		<uni-table border stripe emptyText="暂无更多数据">
			<uni-tr>
				<uni-th align="center">时间</uni-th>
				<uni-th align="center">目标系统</uni-th>
				<uni-th align="center">目标设备</uni-th>
				<uni-th align="center">完成数量</uni-th>
				<uni-th align="center">检测结果</uni-th>
			</uni-tr>
			<uni-tr v-for="(i, k) in dataList" :key="k">
				<uni-td>{{ i.createTime }}</uni-td>
				<uni-td>{{ i.systemName }}</uni-td>
				<uni-td>{{ i.systemDeviceName }}</uni-td>
				<uni-td>{{ i.inspectCount }}</uni-td>
				<uni-td>{{ i.status == 1 ? "合格" : "不合格" }}</uni-td>
			</uni-tr>
		</uni-table>
		<uv-load-more v-if="dataList.length > 0" :status="status" line />
		<uv-popup ref="popupRef" mode="right" z-index="980" closeable>
			<view class="popup-content">
				<uv-status-bar />
				<uv-text text="数据筛选" color="#757575" size="28rpx" line-height="100rpx" margin="auto 30rpx" />
				<uv-text text="时间" color="#757575" size="28rpx" line-height="80rpx" margin="auto 30rpx" />
				<view class="row">
					<view class="row-btn" v-for="(i, k) in times" :key="k" :class="{ active: i.value == time }"
						@click="changeTime(i)">
						{{ i.label }}
					</view>
				</view>
				<uv-text text="自定义时间段" color="#757575" size="28rpx" line-height="80rpx" margin="auto 30rpx" />
				<view class="date-box" @click="handleCalendar">
					<uv-icon name="clock" color="#BDBDBD" size="28rpx" />
					<view v-if="!queryParams.beginTime || !queryParams.endTime" class="placeholder">选择时间范围</view>
					<view v-else class="date">
						{{ queryParams.beginTime }} - {{ queryParams.endTime }}
					</view>
				</view>
				<view class="row-bottom">
					<uv-button text="重置" @click="resetQuery" />
					<uv-button text="确定" color="#fff" :custom-style="{
              background: '#4EA770',
            }" @click="handleQuery" />
				</view>
			</view>
		</uv-popup>
		<uv-calendars ref="calendarsRef" mode="range" :round="0" color="#4EA770" confirm-color="#4EA770" allow-same-day
			:date="
        queryParams.beginTime && queryParams.endTime
          ? [queryParams.beginTime, queryParams.endTime]
          : ''
      " @confirm="confirmDate" />
	</view>
</template>
<script setup>
	import {
		ref
	} from "vue";
	import {
		onLoad,
		onPullDownRefresh,
		onReachBottom
	} from "@dcloudio/uni-app";
	import {
		getDateRange
	} from "@/common/mothed.js";
	import {
		getBoardDetails
	} from "@/request/home.js";
	import iconFunnel from "@/static/icon_funnel.png";

	const queryParams = ref({
		beginTime: "", // 开始时间
		endTime: "", // 结束时间
		subPlanId: "", // 项目id
		pageNum: 1, // 当前页码
		pageSize: 10, // 每页数量
	});
	const total = ref(0); // 总数量
	const dataList = ref([]); // 项目完成列表
	const popupRef = ref(); // 弹出层ref
	const calendarsRef = ref(); // 日历组件ref
	const status = ref("loadmore"); // 加载状态
	const time = ref(""); // 选中时间类型
	const times = ref([{
			value: "month",
			label: "本月"
		},
		{
			value: "week",
			label: "本周"
		},
		{
			value: "day",
			label: "今日"
		},
	]); // 快捷时间列表

	onLoad((e) => {
		queryParams.value.subPlanId = e.id;
		getList();
	});

	onPullDownRefresh(() => {
		queryParams.value.pageNum = 1;
		getList();
	});

	onReachBottom(() => {
		if (dataList.value.length < total.value) {
			paramsQuery.value.pageNum++;
			getList();
		}
	});

	// 获取数据列表
	const getList = () => {
		status.value = "loading";
		getBoardDetails(queryParams.value)
			.then((res) => {
				if (res.code == 200) {
					dataList.value =
						queryParams.value.pageNum == 1 ? res.rows : dataList.value.concat(res.rows);
					total.value = res.total;
				}
			})
			.finally(() => {
				uni.stopPullDownRefresh();
				status.value = total.value == dataList.value.length ? "nomore" : "loadmore";
			});
	};

	// 时间类型切换
	const changeTime = (i) => {
		const range = getDateRange(i.value);
		queryParams.value.beginTime = range[0];
		queryParams.value.endTime = range[1];
		time.value = i.value;
	};

	// 打开筛选弹窗
	const rightClick = () => {
		popupRef.value.open();
	};

	// 打开日历弹窗
	const handleCalendar = () => {
		calendarsRef.value.open();
	};

	// 选择日期
	const confirmDate = (val) => {
		queryParams.value.beginTime = val.range.before;
		queryParams.value.endTime = val.range.after;
		time.value = "";
	};

	// 重置查询
	const resetQuery = () => {
		time.value = "";
		queryParams.value.beginTime = "";
		queryParams.value.endTime = "";
		popupRef.value.close();
		getList();
	};

	// 确认查询
	const handleQuery = () => {
		popupRef.value.close();
		getList();
	};
</script>
<style lang="scss" scoped>
	.popup-content {
		width: 600rpx;
		height: 100%;
		position: relative;

		.row {
			display: grid;
			gap: 20rpx;
			grid-template-columns: repeat(3, 1fr);
			padding: 0 30rpx;
			margin-bottom: 40rpx;

			&-btn {
				width: 160rpx;
				height: 66rpx;
				border-radius: 8rpx;
				background-color: #fff;
				border: 2rpx solid #dedede;
				font-size: 28rpx;
				color: #757575;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.active {
				color: #fff;
				background-color: #4ea770;
				border: 2rpx solid #4ea770;
			}
		}

		.date-box {
			height: 66rpx;
			padding: 12rpx;
			box-sizing: border-box;
			margin: auto 30rpx;
			background: #ffffff;
			border-radius: 8rpx;
			border: 2rpx solid #dedede;
			display: flex;
			align-items: center;

			.placeholder {
				font-size: 28rpx;
				color: #bdbdbd;
				margin-left: 10rpx;
			}

			.date {
				font-size: 28rpx;
				color: #bdbdbd;
				margin-left: 10rpx;
			}
		}

		.row-bottom {
			position: absolute;
			bottom: 0;
			width: 100%;
			display: flex;

			view {
				flex: 1;
			}
		}
	}

	:deep(.uv-popup__content__close--top-right) {
		top: calc(15px + var(--status-bar-height)) !important;
	}
</style>